<#assign contextPath = request.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>log</title>
    <link rel="stylesheet" href="${contextPath}/common/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-row">
    <div class="layui-col-sm9">
        <div id="log-container" style="height: 500px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;"
             onbeforeunload="closeWebSocket()">
            <div>
            </div>
        </div>
    </div>
    <div id="fileRoot" class="layui-col-sm3">
        <div style="height: 500px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
            <div style="display:grid">
                <button id="back" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe65c;</i>
                </button>
                <input id="pwd" type="text" value="" readonly="readonly" class="layui-input">
            </div>

            <div id="fileList">
            </div>
        </div>
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-xs4">
        <div class="layui-form-item" style="padding-top: 10px">
            <label class="layui-form-label">待查看文件:</label>
            <div class="layui-input-block">
                <input type="text" id="filePathName" lay-verify="required" placeholder="请输入待查看文件" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-xs3">
        <div style="padding-top: 10px;padding-left: 10px">
            <button class="layui-btn" id="view">查看</button>
            <button class="layui-btn" id="close">断开</button>
            <button class="layui-btn" id="clear">清理</button>
        </div>

    </div>
    <div class="layui-col-xs3">
    </div>
    <div class="layui-col-xs2">
    </div>
</div>
</body>
<script>

</script>
<script src="${contextPath}/common/layui/layui.js"></script>
<script>
    var websocket = null;
    var $ = null;
    layui.use(['layer', 'form'], function () {
        $ = layui.jquery;

        if ('WebSocket' in window) {

        } else {
            window.alert("浏览器不支持WebSocket");
            return;
        }

        //文件刷新
        listFilePost("${contextPath}/fileShow/listRoot");

        $('#back').on('click', function () {
            var pwd = $('#pwd').val();
            var pwdArray = pwd.split("/");
            pwdArray.splice(pwdArray.length - 1, 1);
            var backPwd;
            pwdArray.forEach(function (value, i) {
                if (i == 0) {
                    backPwd = "/" + value;
                } else if (backPwd == "/") {
                    backPwd = backPwd + value;
                } else {
                    backPwd = backPwd + "/" + value;
                }
            });
            $('#pwd').val(backPwd);
            var pwd = $('#pwd').val();
            var params ={};
            params.pathDir=pwd;
            listFilePost("${contextPath}/fileShow/listDir",params);
        });


        $('#view').on('click', function () {
            var filePathName = $('#filePathName')[0].value;
            if (filePathName != "" && filePathName != undefined) {
                open(filePathName);
            }
        });

        function open(filePathName) {
            if ('WebSocket' in window) {
                if (websocket != null) {
                    websocket.close();
                }
                var url = 'ws://47.101.141.16:8083/localLog?filePathName=' + filePathName;
                websocket = new WebSocket(url);
                websocket.onmessage = function (event) {
                    // 接收服务端的实时日志并添加到HTML页面中
                    $("#log-container div").append(event.data);
                    // 滚动条滚动到最低部
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                };
            } else {
                window.alert("浏览器不支持WebSocket");
                return;
            }
            return false;
        }

        $('#close').on('click', function () {
            if (websocket) {
                websocket.close();
                layer.msg("关闭成功!");
            } else {
                layer.msg("没连接WS!");
            }
            return false;
        });

        $('#clear').on('click', function () {
            $("#log-container div").html('');
            ;
            return false;
        });
    });

    function closeWebSocket() {
        if (websocket) {
            websocket.close();
            layer.msg("关闭成功!");
        } else {
            layer.msg("没连接WS!");
        }
        return false;
    }

    function enter(e) {
        var pwd = $('#pwd').val();
        var params ={};
        params.pathDir=pwd+'/'+e.text;
        listFilePost("${contextPath}/fileShow/listDir",params);
    }

    function listFilePost(url,params) {
        $.post(url,params ,function (data) {
            $('#pwd').val(data.pwd);
            var files = data.files;
            var directorys = data.directorys;
            $("#fileList").html('');
            files.forEach(function (value, i) {
                if (i == 0) {
                    //第一个元素
                    $("#fileList").append("|" + "<br/>");
                    $("#fileList").append("|- - - -" + value + "<br/>");
                } else {
                    $("#fileList").append("|- - - -" + value + "<br/>");
                }
            });
            directorys.forEach(function (value, i) {
                if (i == 0) {
                    //第一个元素
                    $("#fileList").append("|" + "<br/>");
                    $("#fileList").append("|- - - -<a onclick='enter(this)' style='color: #007DDB'>" + value + "</a><br/>");
                } else {
                    $("#fileList").append("|- - - -<a onclick='enter(this)' style='color: #007DDB'>" + value + "</a><br/>");
                }
            });
        });
    }
</script>
</html>